<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员首页</title>
    <!--导入layui-->
    <link rel="stylesheet" href="../layui/layui/css/layui.css">
    <script src="../layui/layui/layui.js" charset="utf-8"></script>
    <%--导入jQeury包--%>
    <script src="../jQuery/jquery-1.11.2.js"></script>

    <script type="text/javascript">
        $(function () {
            layui.use(['carousel','element'], function() {
                var carousel = layui.carousel;
                var element=layui.element;
                carousel.render({
                    elem: '#test1'
                    ,height:"100%"
                    ,width:"100%"
                    ,anim:"default"
                    ,autoplay:true
                    ,interval:3000
                    ,full:false
                    ,arrow:"hover"
                    //,anim: 'updown' //切换动画方式
                });


                //判断stuId不能为空
                if ("${sessionScope.stuId}"!=""){
                    //调用个人信息展示函数
                    selfMsgShow();
                }else{
                    alert("本系统为保证您的隐私安全，必须打开浏览器cookie才能正常使用");
                }

                //用于公告信息的ajax
                $.ajax({
                    url:"../NoticeShowServlet?method=showNotice",
                    type:"POST",
                    data:"",
                    success:function(data){
                        if (data.length!=0){
                            //反序列化数据
                            data=JSON.parse(data);
                            //调用添加公告标签的函数
                            addNotice(data,element,carousel);
                        }else{
                            var str='';
                            str=str+'<div style="text-align: center"><p style="font-size: 25px;">公告</p><br/><div><span style="font-size: 22px;color: red;">当前暂无公告</span></div></div>';
                            str=str+'';
                            //将字符串标签转换为子字符
                            $("#test2").append(str);
                            element.init();
                            lunbo(carousel);
                        }
                    }
                });

            });


            //个人信息展示函数
            function selfMsgShow(){
                $.ajax({
                    type:"POST",
                    url:"../StudentSelfMsgServlet",
                    data:"",
                    success:function(data){
                        if (data=="no"){
                            alert("系统发生错误")
                        }else{
                            //对发送过来的json反序列化
                            data=JSON.parse(data);
                            //$.parseJSON(data);
                            //对接收的值一一填充到对应位置
                            $("#stuId").text(data.stuId);
                            $("#stuName").text(data.stuName);
                            $("#stuSex").text(data.stuSex);
                            $("#className").text(data.className);
                            $("#stuPhone").text(data.stuPhone);
                            $("#stuItb").text(data.stuItb);
                            $("#selfId").text(data.selfId);
                        }
                    }
                });
            }


            //用于添加公告的函数
            function addNotice(data,element,carousel){
                debugger;
                //用来定义接收标签的字符串
                var str='<div  carousel-item  style="width: 600px;height: 300px;">';
                $.each(data.data,function(index,item){
                    //调用时间处理函数
                    var boo=showNoticeTime(item.noticeBeginTime,item.noticeOutTime);
                    if (boo){
                        str=str+'<div style="text-align: center;background-image: url(../img/notice4.jpg);"><p style="font-size: 25px;">公告</p><br/><div style="width: 350px;margin-left: 120px;"><span style="font-size: 22px;color: red;">'+item.noticeBody+'</span></div></div>';
                    }
                });
                if (str!=""){
                    str=str+"</div>";
                    //将字符串标签转换为子字符
                    $("#test2").append(str);
                    element.init();
                    lunbo(carousel);
                }else{


                }
            }

            //用于对时间进行操作的行数，该函数有返回值，返回值为true则显示公告，返回值为false则不显示公告
            function showNoticeTime(oldTime,futureTime){
                var boo=true;
                var oldTime=oldTime;
                var futureTime=futureTime;
                oldTime=oldTime.split(" ")[0];
                futureTime=futureTime.split(" ")[0];
                var old=countTime(oldTime);
                var future=countTime(futureTime);


                var time=new Date();
                var year=time.getFullYear();
                var mouth=time.getMonth()+1;
                var day=time.getDate();
                newTime=year+"-"+mouth+"-"+day;
                var news=countTime(newTime);

                if(news>future){//判断公告时间是否过期
                    boo=false;
                    //此处删除公告

                }else if(old>news){//判断未达公告显示时间
                    boo=false;
                    //此处不做处理
                }else if(old<=news && news<=future){
                    boo=true;
                }

                function countTime(time){
                    var time=time.split("-");
                    var totalTime=0;
                    $.each(time, function(index,item) {
                        if(index!=0){
                            if(index==1){
                                totalTime=totalTime+(parseInt(item)*30);
                            }else{
                                totalTime=totalTime+parseInt(item);
                            }
                        }
                    });
                    return totalTime;
                }
                return boo;
            }

            function lunbo(carousel){
                carousel.render({
                    elem: '#test2'
                    ,height:"300px"
                    ,width:"600px"
                    ,anim:"default"
                    ,autoplay:true
                    ,interval:4000
                    ,full:false
                    ,arrow:"none"
                    //,anim: 'updown' //切换动画方式
                });
            }

        });
    </script>
</head>
<body>
    <div class="layui-carousel" id="test1" style="width: 100%;" >
        <div carousel-item style="width: 100%;height: 400px;">
            <div>
                <img  src="../img/kc.jpg" style="width: 100%;height: 100%;" />
            </div>
            <div>
                <img src="../img/ksks.jpg" style="width: 100%;height: 100%;"  />
            </div>
            <div>
                <img src="../img/timg.jpg" style="width: 100%;height: 100%;"  />
            </div>
            <div>
                <img src="../img/timg2.jpg" style="width: 100%;height: 100%;"  />
            </div>
            <div>
                <img src="../img/ksks.jpg" style="width: 100%;height: 100%;"  />
            </div>
        </div>
    </div>
    <div>

    </div>
    <div class="layui-carousel" id="test2" style="width: 100%;height: 100%;margin-top: 10px;float: left;" >
        <%--<div carousel-item; style="width: 600px;height: 300px;" id="notice">

        </div>--%>
    </div>
    <div style="width:550px;height: 300px;float: right;margin-top: 1%;margin-right: 9%;">
        <div style="width: 35%;height: 20%;margin-left: 33%;">
            <span style="font-size: 25px;margin-left: 20%;line-height: 100%;align-content: center">个人信息</span>
        </div>
        <div style="width: 90%;height: 75%;margin-left: 5%;">
            <div style="height: 10%;width: 100%;border-top: 1px dashed gray"></div>
            <table style="width: 100%;height: 80%;font-size: 18px;">
                <tr>
                    <td>
                        <span style="margin-left: 15px;">学员编号:</span>
                    </td>
                    <td>
                        <span id="stuId"></span>
                    </td>
                    <td>
                        <span>学员姓名:</span>
                    </td>
                    <td>
                        <span id="stuName"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="margin-left: 15px;">学员性别:</span>
                    </td>
                    <td>
                        <span id="stuSex"></span>
                    </td>
                    <td>
                        <span>学员班级:</span>
                    </td>
                    <td>
                        <span id="className"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span>身份证号码:</span>
                    </td>
                    <td>
                        <span id="selfId"></span>
                    </td>
                    <td>
                        <span>学员电话:</span>
                    </td>
                    <td>
                        <span id="stuPhone"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span style="margin-left: 15px;">是否在籍:</span>
                    </td>
                    <td>
                        <span id="stuItb"></span>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>